<template>
  <div class="Host">
    <div class="tab">
      <div class="host-date">
        <span>日期时间：</span>
        <el-date-picker v-model="value1" type="date" placeholder="">
        </el-date-picker>
        <!-- <input class="date-select1" type="text" name="" id="" /> -->
        <span>时段：</span>
        <select class="date-select2" name="" id="">
          <option value="">请先选择日期</option>
          <option value="">全天</option>
          <option value="">上午</option>
          <option value="">下午</option>
        </select>
      </div>
      <div class="host-tab">
        <div class="host-tab1">
          <div class="type">典礼类型:</div>
          <div class="tab-type">
            <el-tabs v-model="activeName1" @tab-click="handleClick">
              <el-tab-pane label="不限" name="one1"></el-tab-pane>
              <el-tab-pane label="西式婚礼" name="two1"></el-tab-pane>
              <el-tab-pane label="中式婚礼" name="three1"></el-tab-pane>
              <el-tab-pane label="汉唐婚礼" name="four1"></el-tab-pane>
              <el-tab-pane label="商务主持" name="five1"></el-tab-pane>
              <el-tab-pane label="宴会主持" name="six1"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="host-tab1">
          <div class="type">主持人级别:</div>
          <div class="tab-type">
            <el-tabs v-model="activeName2" @tab-click="handleClick">
              <el-tab-pane label="不限" name="one2"></el-tab-pane>
              <el-tab-pane label="首席" name="two2"></el-tab-pane>
              <el-tab-pane label="高端" name="three2"></el-tab-pane>
              <el-tab-pane label="资深" name="four2"></el-tab-pane>
              <el-tab-pane label="专业" name="five2"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="host-tab1">
          <div class="type">排序方式:</div>
          <div class="tab-type">
            <el-tabs v-model="activeName3" @tab-click="handleClick">
              <el-tab-pane label="不限" name="one3"></el-tab-pane>
              <el-tab-pane label="价格从高到低" name="two3"></el-tab-pane>
              <el-tab-pane label="价格从低到高" name="three3"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class="host-search"></div>
    </div>
    <div class="host-list">
      <!-- 首席主持人开始 -->
      <div class="hot-box">
        <div class="list-title">
          <div></div>
          <p><span>首席主持人</span></p>
        </div>
        <div class="list-content">
          <ul>
            <li v-for="item1 in topHost" :key="item1.id">
              <div class="list-content-img">
                <a href=""><img :src="item1.pic" alt="" /></a>
              </div>
              <div class="list-content-text">
                <span class="host-name">{{ item1.name }}</span>
                <span class="host-price">价格：{{ item1.price }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 首席主持人结束 -->
      <!-- 高端主持人开始 -->
      <div class="hot-box">
        <div class="list-title">
          <div></div>
          <p><span>高端主持人</span></p>
        </div>
        <div class="list-content">
          <ul>
            <li v-for="item2 in heightHost" :key="item2.id">
              <div class="list-content-img">
                <a href=""><img :src="item2.pic" alt="" /></a>
              </div>
              <div class="list-content-text">
                <span class="host-name">{{ item2.name }}</span>
                <span class="host-price">价格：{{ item2.price }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 高端主持人结束 -->
      <!-- 资深主持人开始 -->
      <div class="hot-box">
        <div class="list-title">
          <div></div>
          <p><span>资深主持人</span></p>
        </div>
        <div class="list-content">
          <ul>
            <li v-for="item3 in deepHost" :key="item3.id">
              <div class="list-content-img">
                <a href=""><img :src="item3.pic" alt="" /></a>
              </div>
              <div class="list-content-text">
                <span class="host-name">{{ item3.name }}</span>
                <span class="host-price">价格：{{ item3.price }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 资深主持人结束 -->
      <!-- 专业主持人开始 -->
      <div class="hot-box">
        <div class="list-title">
          <div></div>
          <p><span>专业主持人</span></p>
        </div>
        <div class="list-content">
          <ul>
            <li v-for="item4 in domainHost" :key="item4.id">
              <div class="list-content-img">
                <a href=""><img :src="item4.pic" alt="" /></a>
              </div>
              <div class="list-content-text">
                <span class="host-name">{{ item4.name }}</span>
                <span class="host-price">价格：{{ item4.price }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 专业主持人结束 -->
    </div>
  </div>
</template>

<script>
import api from "../../api";
export default {
  name: "Host",
  data() {
    return {
      value1: "",
      activeName1: "one1",
      activeName2: "one2",
      activeName3: "one3",
      topHost: [],
      heightHost: [],
      deepHost: [],
      domainHost: [],
    };
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
  },
  mounted() {
    api.hostlist().then((res) => {
      console.log(res.data);
      for (let i = 0; i < res.data.list.length; i++) {
        if (res.data.list[i].price >= 9000) {
          this.topHost.push(res.data.list[i]);
        } else if (res.data.list[i].price >= 6600) {
          this.heightHost.push(res.data.list[i]);
        } else if (res.data.list[i].price >= 4800) {
          this.deepHost.push(res.data.list[i]);
        } else {
          this.domainHost.push(res.data.list[i]);
        }
      }
    });
  },
};
</script>

<style scoped lang="less">
.Host {
  width: 1000px;
  margin: 0 auto;
  .tab {
    width: 100%;
    height: 225px;
    border: 1px solid rgba(242, 218, 180, 1);
    padding: 10px;
    box-sizing: border-box;
    .host-date {
      span {
        margin-right: 22px;
        margin-left: 15px;
        font-size: 14px;
      }
      .date-select1 {
        border: 1px solid #a9a9a9;
        width: 272px;
        height: 37px;
        padding: 0 10px;
      }
      .date-select2 {
        border: 1px solid #a9a9a9;
        width: 272px;
        height: 37px;
        margin-right: 22px;
      }
    }
    .host-tab {
      .host-tab1 {
        display: flex;
        .type {
          width: 100px;
          float: left;
          text-align: right;
          padding: 10px 30px 10px 10px;
        }
        .tab-type {
          flex: 1;
        }
      }
    }
  }
  .tab > div {
    width: 100%;
  }
  .host-list {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    .list-title {
      padding: 0 !important;
      width: 1000px;
      height: 50px;
      background-color: #faf4e8;
      margin-top: 30px;
      margin-bottom: 30px;
      border: 1px solid #f3dcb9;
      box-sizing: border-box;
      margin: 20px auto;
      div {
        height: 25px;
        width: 10px;
        margin-top: 12.5px;
        margin-bottom: 12.5px;
        float: left;
        background-color: #c4b4a8;
        border-radius: 35%;
        margin-right: 10px;
        margin-left: 15px;
      }
      p {
        height: 50px;
        line-height: 50px;
        float: left;
        span {
          font-size: 20px;
          color: #c28f47;
        }
      }
    }
    .hot-box {
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
    }
    .list-content {
      width: 1000px;
      padding: 10px;
      li {
        width: 175px;
        height: 238px;
        margin-right: 25px;
        margin-bottom: 30px;
        float: left;
        position: relative;
        .list-content-img {
          width: 175px;
          height: 238px;
          a {
            text-decoration: none;
            color: #000;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .list-content-text {
          height: 40px;
          background-color: rgba(0, 0, 0, 0.5);
          position: absolute;
          bottom: 0px;
          left: 0;
          width: 175px;
          .host-name {
            width: 68px;
            height: 40px;
            float: left;
            line-height: 40px;
            color: white;
            box-sizing: border-box;
          }
          .host-price {
            height: 40px;
            float: left;
            text-align: right;
            line-height: 40px;
            color: white;
          }
        }
      }
    }
  }
}
</style>